<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div class="header" id="ban" th:fragment="header">
        <div class="container">
            <div class="head-left wow fadeInLeft animated animated" data-wow-delay=".3s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInLeft;">
                <div class="header-search">
                    <div class="search">
                        <input class="search_box" type="checkbox" id="search_box">
                        <label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
                        <div class="search_form">
                            <form action="#" method="post">
                                <input type="text" name="Search" placeholder="Search...">
                                <input type="submit" value="Send">
                            </form>
                        </div>
                    </div>
                </div><!--搜索条结束-->
            </div>
            <div class="header_right wow fadeInLeft animated animated" data-wow-delay=".5s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInLeft;">
                <nav class="navbar navbar-default">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <nav class="link-effect-7" id="link-effect-7">
                            <ul class="nav navbar-nav">
                                <li class="active act"><a href="/">首页</a></li>
                                <li><a href="/blog/list">所有博客</a></li>
                                <li><a href="/blog/category/1">技术探讨</a></li>
                                <li><a href="#">实验基地</a></li>
                                <li><a href="#">资源导航</a></li>
                                <li><a href="/diary">点点滴滴</a></li>
                                <li><a href="/blogAdvice">给我留言</a></li>
                                <li><a href="/blog/1">关于博主</a></li>
                            </ul>
                        </nav>
                    </div>

                    <!-- /.navbar-collapse -->
                </nav><!--导航条结束-->
            </div>
            <div class="nav navbar-nav navbar-right social-icons wow fadeInRight animated animated" data-wow-delay=".5s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInRight;">
                <div class="heart " id="like1" rel="like"><span class="likeCount" id="likeCount1" th:text="${session.likeCount}">15</span></div>

            </div><!--点赞按钮结束-->
            <div class="clearfix"></div>
        </div>
    </div><!--头部导航结束-->


    <div class="header-bottom" th:fragment="blogTitle">
        <div class="container">
            <div class="logo wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h1><a href="/">DB'S BLOG</a></h1>
                <p><label class="of"></label><span th:text="${application.motto.motto}">Just do IT</span><label class="on"></label></p>
            </div>
        </div>
    </div><!--博客标题结束-->


    <div class="col-md-3 technology-right" th:fragment="rightNav">
        <div class="blo-top1">
            <div class="tech-btm">
                <div id="time" class="insta ">
                    <canvas id="canvas" style="width: 100%"></canvas>
                </div><!--时间结束-->

                <div class="search-1 wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <form action="#" method="post">
                        <input type="search" name="Search" value="Search" onfocus="this.value = '';"
                               onblur="if (this.value == '') {this.value = 'Search';}" required>
                        <input type="submit" value=" ">
                    </form>
                </div><!--搜索结束-->

                <div class="insta wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <select id="cd-dropdown" class="cd-select">
                        <option selected>博客类别</option>
                        <option th:each="blogType:${application.blogTypeList}" th:value="'/blog/category/'+${blogType.id}"><a  th:text="${blogType.typeName}">项目分享</a></option>
                    </select>
                </div><!--博客类别结束-->

                <div class="blog-grids wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s" style="border: none">
                    <h4 style="margin: 0">热门点击</h4>
                </div>
                <div class="blog-grids wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s" th:each="hotBlog:${session.hotBlogList}">
                    <div class="blog-grid-left">
                        <a href="blog.html" th:href="'/blog/'+${hotBlog.id}">
                            <img th:src="${hotBlog.coverImageName}" src="../../static/foreground/images/m2.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="blog-grid-right">
                        <h5><a href="blog.html" th:href="'/blog/'+${hotBlog.id}" th:text="${hotBlog.title}">热门博文1</a></h5>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!--热门点击结束-->

                <div class="insta wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>标签云</h4>
                    <div id="tag-cloud"></div>
                </div><!--标签云结束-->

                <div class="dateCategory wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>日期归档</h4>
                    <nav class="cl-effect-1">
                        <a th:each="blogDateArchive:${application.blogDateArchiveList}" th:text="${#calendars.format(blogDateArchive.archiveDate,'yyyy年MM月')}+'&nbsp;('+${blogDateArchive.totalNum}+')'" th:href="'/blog/dateArchive/'+${#calendars.format(blogDateArchive.archiveDate,'yyyy-MM')}">2017年04月11日 (10)</a>
                    </nav>

                </div><!--日期归档结束-->

                <div class="insta wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>友情链接</h4>
                    <div class="sim-button button5" th:each="link:${application.linkList}"><a th:href="${link.linkUrl}" target="_blank"><span th:text="${link.linkName}">罗思瑜的博客</span></a></div>
                </div><!--友情链接结束-->
            </div>
        </div>
    </div><!--右侧内容结束-->


    <div class="footer" th:fragment="footer">
        <div class="container">
            <div class="col-md-4 footer-left wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h4>关于本站</h4>
                <p id="siteTime"></p>
                <p th:text="'网站总访问量: '+${session.readNum}">网站总访问量: 1200</p>
                <img  src="http://op93pqovl.bkt.clouddn.com/images/t4.jpg" class="img-responsive" alt="">
                <div class="bht1">
                    <a href="blog.html">Read More</a>
                </div>
            </div>
            <div class="col-md-8 footer-middle wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h4>最新评论</h4>
                <div class="mid-btm" th:each="newComment:${session.newCommentList}">
                    <a th:text="${newComment.nickName}+'&nbsp&nbsp'+${#calendars.format(newComment.publishTime,'yyyy-MM-dd HH:mm:ss')}">your link</a>
                    <p><span th:text="${newComment.content}" class="sourceText"></span></p>
                </div>

            </div>

            <div class="clearfix"></div>
        </div>
    </div><!--脚部结束-->


    <div class="copyright wow fadeInDown" th:fragment="copyright" data-wow-duration=".8s" data-wow-delay=".2s">
        <div class="container">
            <p>Copyright &copy; 2017 Bobbi All rights reserved.</p>
        </div>
    </div><!--版权区结束-->
</html>

